<template>
  <div class="item-bottom">
    <div class="title">
      <span class="name">我的收藏</span>
    </div>
    <div class="content">
      <div class="wrap1" v-if='!answerList.length'>
        <svg width="150" height="120" viewBox="0 0 150 120" fill="currentColor">
          <path
            fill="#E7EAF1"
            d="M39.09 35.994c.05-3.31 2.777-5.994 6.096-5.994h18.562c2.21 0 4.667 1.66 5.487 3.708L70.152 36h34.85A5.997 5.997 0 0 1 111 41.99v40.02c0 3.308-2.69 5.99-6 5.99H45c-3.314 0-6-2.686-6-5.99V41.99c0-.077 0-.153.004-.23l.086-5.766zm2.914 5.81L42 41.99v40.02A2.998 2.998 0 0 0 45 85h60c1.655 0 3-1.342 3-2.99V41.99a2.998 2.998 0 0 0-3-2.99H68.12l-1.67-4.177C66.085 33.915 64.73 33 63.747 33h-18.56c-1.68 0-3.07 1.368-3.097 3.038l-.086 5.767zM69.89 72.658c-1.56.715-3.105-.395-2.906-2.113l.697-6.032-4.11-4.47c-1.16-1.265-.58-3.076 1.115-3.418l5.952-1.2 2.982-5.29c.843-1.498 2.744-1.507 3.593 0l2.98 5.29 5.955 1.2c1.684.34 2.28 2.145 1.11 3.418l-4.11 4.47.698 6.032c.197 1.708-1.336 2.832-2.908 2.113l-5.52-2.527-5.523 2.53z"
          ></path>
        </svg>
        <div class="word">
          还没有收藏夹，<a href="#" class="active">创建第一个收藏夹</a>
        </div>
      </div>
      <div class="wrap2" v-else>
      <answer-item
        v-for="(item, index) in answerList"
        :key="index"
        :answerMessage="answerList[index]"
        left="left"
        cancelCollection="取消收藏"
      />
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/common.scss";
import AnswerItem from "@/components/question/AnswerItem";
import axios from "@/util/axios";
export default {
  name: "MYCollection",
  data() {
    return {
      answerList: [],
    };
  },
  components: {
    AnswerItem,
  },
  async created() {
    const res = await axios.get("/fav/findMyFav", {
      params: { pageNum: "1", pageSize: "10", user_id: "6" },
    });
    // then(res => {console.log(res)});
    if (res.code == 1) {
      this.answerList = res.data;
      // 更改收藏数量
      this.$bus.$emit("changeCollectionCount", res.data.length);
    }
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 1rem;
}
</style>